<template>
  <div>
    <div class="nav-box" :class="isChangNav ? 'nav-change': ''">
      <div class="nav-container flex justify-between align-center">
        <div class="logo"></div>
        <div class="flex">
          <nuxt-link class="menu-item" :to="{path: '/'}">首页</nuxt-link>
          <div class="menu-item" v-for="(item, index) in menus" :key="index" @click="handleOpenCategory(item)">
            {{item.name}}
          </div>
          <div class="menu-item" v-for="(item, index) in pages" :key="index" @click="handleOpenPage(item)">
            {{item.title.rendered}}
          </div>
        </div>
      </div>
    </div>
    <div class="w-100 top-container">
      <div class="cover"></div>
    </div>
    <div style="min-height: 400px;" class="mt-3">
      <nuxt/>
    </div>
    <AppFooter></AppFooter>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import AppFooter from "@/components/AppFooter";

  export default {
    data() {
      return {
        isChangNav: false
      }
    },
    components:{
      AppFooter
    },
    computed: {
      ...mapState(['menus', 'pages'])
    },
    mounted() {
      window.addEventListener('scroll', this.menu)
    },
    methods: {
      handleOpenCategory(item) {
        this.$router.push({path: `/categories/${item.id}`})
      },
      handleOpenPage(item) {
        this.$router.push({path: `/page/${item.id}`})
      },
      menu() {
        let scroll = document.documentElement.scrollTop || document.body.scrollTop;
        if(scroll > 50) {
          this.isChangNav = true
        } else {
          this.isChangNav = false
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .top-container {
     background-color: #20a53a;
     color: #ffffff;
     background-size: cover;
     background-image: url("@/assets/images/lli-bg@2x.webp");
     height: 330px;
     transition: 1s opacity ease;
     position: relative;

     .cover {
       position: absolute;
       width: 100%;
       height: 100%;
       background-color: rgba(0,0,0,0.2);
     }
   }

  .nav-box {
    position: fixed;
    left: 0;
    right: 0;
    height: 50px;
    width: 100%;
    z-index: 999;
    &.nav-change {
      background-color: #ffffff;
      border-bottom: 1px solid #e4e4e4;
      .nav-container {
        .logo{
          background-position: 0 -48px;
        }
        .menu-item {
          color: #333333;
          &:after {
            background: #333333;
          }
          &:hover {
            color: #333333;
          }
        }
      }
    }
    .nav-container {
      margin:0 auto;
      width: 1050px;
      height: 50px;

      .logo {
        text-align: center;
        transition: all .5s;
        background-image: url('@/assets/images/logo.png');
        background-position: 0 0;
        width: 206px;
        height: 38px;
      }
      .menu-item {
        position: relative;
        line-height: 50px;
        padding: 0 20px;
        cursor: pointer;
        color: #ffffff;
        &:after {
          content: '';
          height: 2px;
          width: 100%;
          position: absolute;
          bottom: 0;
          left: 0;
          background: #fff;
          transform: scale(0,1);
          transform-origin: 50% 50%;
          transition: all .3s;
        }
        &:hover {
          color: #ffffff;
          &:after {
            transform: scale(1,1);
          }
        }
      }
    }
  }

  .footer {
    clear: both;
    background-color: #324057;
    margin-top: 40px;
    color: #a4aebd;
  }
</style>
